Ember.js Computed Properties এবং Observers

Ember.js এর Computed Properties এবং Observers হল দুটি শক্তিশালী বৈশিষ্ট্য, যা আপনাকে কম্পোনেন্ট বা মডেলের প্রপার্টির ভিত্তিতে ডেটা তৈরি, আপডেট এবং পর্যবেক্ষণ করতে সহায়তা করে। এগুলি কোডের মধ্যে ডেটার পরিবর্তন এবং ডিপেনডেন্সি ম্যানেজমেন্ট সহজ করে তোলে।

Ember.js Computed Properties

Computed Properties হল বিশেষ প্রপার্টি যা অন্যান্য প্রপার্টি বা মডেল ডেটার উপর ভিত্তি করে গণনা করা হয়। যখন নির্ভরশীল প্রপার্টি পরিবর্তিত হয়, তখন কম্পিউটেড প্রপার্টি পুনরায় গণনা হয়। এটি একটি শক্তিশালী প্যাটার্ন, কারণ এতে আপনি কার্যকরী এবং ডাইনামিক ডেটা ম্যানিপুলেশন করতে পারেন।

১. Computed Property কী?

Computed Property সাধারণত ডেটার একটি সেটের উপর ভিত্তি করে একটি নতুন প্রপার্টি তৈরি করে। যখন যে কোনও নির্ভরশীল প্রপার্টি পরিবর্তিত হয়, তখন কম্পিউটেড প্রপার্টি আপডেট হয়।

এটি Ember.computed বা @computed ডেকোরেটরের মাধ্যমে তৈরি করা হয়।

২. Computed Property ব্যবহার

import EmberObject, { computed } from '@ember/object';

const Person = EmberObject.extend({
  firstName: 'John',
  lastName: 'Doe',

  // Computed Property
  fullName: computed('firstName', 'lastName', function() {
    return `${this.firstName} ${this.lastName}`;
  })
});

// Example usage
let person = Person.create();
console.log(person.fullName);  // Output: "John Doe"

এখানে, fullName একটি computed property যা firstName এবং lastName প্রপার্টির উপর ভিত্তি করে তৈরি হয়েছে। যখন firstName বা lastName পরিবর্তিত হবে, তখন fullName স্বয়ংক্রিয়ভাবে আপডেট হবে।

৩. Multiple Dependencies

কম্পোনেন্ট বা মডেলের একাধিক প্রপার্টির উপর ভিত্তি করে একটি কম্পিউটেড প্রপার্টি তৈরি করা যায়।

import EmberObject, { computed } from '@ember/object';

const Person = EmberObject.extend({
  firstName: 'John',
  lastName: 'Doe',
  age: 30,

  fullName: computed('firstName', 'lastName', function() {
    return `${this.firstName} ${this.lastName}`;
  }),

  description: computed('fullName', 'age', function() {
    return `${this.fullName} is ${this.age} years old.`;
  })
});

let person = Person.create();
console.log(person.description); // Output: "John Doe is 30 years old."

এখানে, description কম্পিউটেড প্রপার্টি fullName এবং age প্রপার্টির উপর নির্ভরশীল।

৪. Read-Only এবং Read-Write Computed Properties

কিছু কম্পিউটেড প্রপার্টি শুধুমাত্র পড়া (read-only) হতে পারে, অন্যদিকে কিছু প্রপার্টি লেখা (read-write) হতে পারে। আপনি set এবং get ব্যবহার করে লেখা এবং পড়া উভয় প্রপার্টি তৈরি করতে পারেন।

Read-only example:

fullName: computed('firstName', 'lastName', function() {
  return `${this.firstName} ${this.lastName}`;
})

Read-write example:

fullName: computed('firstName', 'lastName', {
  get() {
    return `${this.firstName} ${this.lastName}`;
  },
  set(key, value) {
    let names = value.split(' ');
    this.set('firstName', names[0]);
    this.set('lastName', names[1]);
    return value;
  }
})

এখানে, fullName প্রপার্টি একটি set এবং get মেথডের মাধ্যমে পড়া এবং লেখা উভয়ই করা যেতে পারে।

Ember.js Observers

Observers হল এমন ফাংশন যা একটি প্রপার্টির পরিবর্তন মনিটর করতে ব্যবহৃত হয়। যখন নির্দিষ্ট প্রপার্টির মান পরিবর্তিত হয়, তখন observer ফাংশনটি ট্রিগার হয়।

১. Observer কী?

Observer হল এমন একটি ফাংশন যা একটি বা একাধিক প্রপার্টির পরিবর্তন পর্যবেক্ষণ করে এবং যখন সেই প্রপার্টির মান পরিবর্তিত হয় তখন একটি নির্দিষ্ট কাজ সম্পাদন করে।

এটি Ember.observer ব্যবহার করে তৈরি করা হয়।

২. Observer ব্যবহার

import EmberObject, { observer } from '@ember/object';

const Person = EmberObject.extend({
  firstName: 'John',
  lastName: 'Doe',

  // Observer
  fullNameChanged: observer('firstName', 'lastName', function() {
    console.log(`Full name changed: ${this.firstName} ${this.lastName}`);
  })
});

// Example usage
let person = Person.create();
person.set('firstName', 'Jane');  // Output: "Full name changed: Jane Doe"

এখানে, fullNameChanged একটি observer যা firstName এবং lastName এর পরিবর্তনকে পর্যবেক্ষণ করে এবং পরিবর্তন হলে তা লগ করে।

৩. Multiple Observers

একাধিক প্রপার্টি পর্যবেক্ষণ করতে পারেন:

fullNameChanged: observer('firstName', 'lastName', function() {
  console.log('First or Last name changed');
}),
ageChanged: observer('age', function() {
  console.log('Age changed');
})

৪. Observers ব্যবহার করার সুবিধা ও সতর্কতা

• Observers ব্যবহার করার সময় সতর্ক থাকতে হবে, কারণ observer ফাংশনটি অতিরিক্ত রিসোর্স ব্যবহার করতে পারে যদি এটি অনেকগুলি পরিবর্তন পর্যবেক্ষণ করে। computed properties সাধারণত observers-এর তুলনায় আরও কার্যকরী এবং বেশি ব্যবহৃত হয়।
• Observer সাধারণত সিঙ্ক্রোনাস ফাংশন। এটি খুব দ্রুত কাজ করে এবং দ্রুত ফায়ার হয়, তবে নির্দিষ্ট কিছু পরিস্থিতিতে অতিরিক্ত আপডেটের কারণে পারফরম্যান্স ইস্যু সৃষ্টি করতে পারে।

Computed Properties এবং Observers এর মধ্যে পার্থক্য

Ember.js Computed Properties এবং Observers উভয়ই ডেটা পরিচালনা এবং ইউজার ইন্টারঅ্যাকশনের জন্য শক্তিশালী টুল। Computed Properties ডেটার উপর ভিত্তি করে নতুন প্রপার্টি তৈরি এবং আপডেট করে, যখন Observers প্রপার্টির পরিবর্তন ট্র্যাক করতে ব্যবহৃত হয়। এটি অ্যাপ্লিকেশন ডেভেলপমেন্টে কার্যকরী এবং ডাইনামিক ডেটা ম্যানিপুলেশন করতে সহায়ক।

Computed Properties (কম্পিউটেড প্রপার্টিজ) হল Ember.js এর একটি শক্তিশালী বৈশিষ্ট্য যা আপনাকে প্রপার্টির মান অটোমেটিকভাবে পুনঃগণনা করতে সাহায্য করে, যখন নির্ভরশীল প্রপার্টির মান পরিবর্তিত হয়। এটি বিশেষত ব্যবহৃত হয় যখন আপনি এমন প্রপার্টি চান, যার মান নির্ভর করে অন্য কোনো প্রপার্টির মানের উপর, এবং যখন সেই মান পরিবর্তিত হয়, তখন নতুন মান স্বয়ংক্রিয়ভাবে গণনা হতে পারে।

Ember.js-এ computed properties কার্যকরীভাবে আপনার অ্যাপ্লিকেশনের state management সহজ করে তোলে, কারণ আপনি নির্দিষ্ট শর্ত অনুযায়ী প্রপার্টির মান কম্পিউট বা রেন্ডার করতে পারেন।

Computed Properties কী?

Computed Properties হল সেই প্রপার্টি যেগুলোর মান dynamically গণনা করা হয় অন্য প্রপার্টির মান পরিবর্তিত হলে। যখন নির্ভরশীল প্রপার্টি পরিবর্তিত হয়, তখন কম্পিউটেড প্রপার্টি স্বয়ংক্রিয়ভাবে পুনর্গণনা হয়।

সাধারণ উদাহরণ:

ধরা যাক, আপনি একটি অ্যাপ্লিকেশনে ব্যবহারকারীর নাম এবং শেষ নামের ভিত্তিতে পূর্ণ নাম গণনা করতে চান। এই ক্ষেত্রেও computed property ব্যবহার করা যেতে পারে।

Computed Properties ব্যবহার করা

Ember.js-এ computed properties ব্যবহৃত হয় @computed ডেকোরেটর বা Ember.computed ফাংশন দিয়ে। তবে, Ember Octane সংস্করণ থেকে আমরা tracked properties ব্যবহার করে এই কাজটি সহজভাবে করতে পারি, যা স্বয়ংক্রিয়ভাবে পুনর্গণনা হয় যখন নির্ভরশীল প্রপার্টির মান পরিবর্তিত হয়।

১. Ember.computed (Legacy Version)

Ember.js এর পুরনো সংস্করণে Ember.computed ফাংশনটি ব্যবহৃত হত। এই ফাংশনটি কম্পিউটেড প্রপার্টি তৈরি করতে ব্যবহৃত হয়।

// app/controllers/application.js
import Controller from '@ember/controller';
import { computed } from '@ember/object';

export default class ApplicationController extends Controller {
  firstName = 'John';
  lastName = 'Doe';

  fullName = computed('firstName', 'lastName', function() {
    return `${this.firstName} ${this.lastName}`;
  });
}

এখানে, fullName কম্পিউটেড প্রপার্টি, firstName এবং lastName প্রপার্টির উপর নির্ভরশীল। যখন প্রথম নাম বা শেষ নাম পরিবর্তিত হয়, fullName প্রপার্টির মানও পরিবর্তিত হবে।

২. Tracked Properties (Ember Octane)

Ember Octane সংস্করণে tracked প্রপার্টি ব্যবহার করা হয়, যা আরও আধুনিক এবং কার্যকরী পদ্ধতি। এখানে, @tracked ডেকোরেটর দ্বারা আমরা কম্পিউটেড প্রপার্টি তৈরি করতে পারি।

// app/controllers/application.js
import Controller from '@glimmer/controller';
import { tracked } from '@glimmer/tracking';

export default class ApplicationController extends Controller {
  @tracked firstName = 'John';
  @tracked lastName = 'Doe';

  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

এখানে, fullName একটি গেটার ফাংশন হিসেবে কাজ করছে এবং যখন firstName বা lastName পরিবর্তিত হবে, তখন fullName অটোমেটিক্যালি রিফ্রেশ হবে।

Computed Properties কেন প্রয়োজন?

১. ডাইনামিক মান গণনা

কম্পিউটেড প্রপার্টির প্রধান সুবিধা হল যে আপনি ডাইনামিকভাবে মান গণনা করতে পারেন এবং যখন নির্ভরশীল প্রপার্টির মান পরিবর্তিত হবে, তখন কম্পিউটেড প্রপার্টির মানও স্বয়ংক্রিয়ভাবে পরিবর্তিত হবে।

২. কোড পুনঃব্যবহারযোগ্যতা বৃদ্ধি

কম্পিউটেড প্রপার্টি ব্যবহারের মাধ্যমে, আপনি একটি নির্দিষ্ট লজিক এক জায়গায় সংজ্ঞায়িত করতে পারেন এবং সেই লজিকটি বিভিন্ন স্থানে ব্যবহার করতে পারেন। এটি কোডের পুনঃব্যবহারযোগ্যতা এবং মেইন্টেনেবিলিটি বৃদ্ধি করে।

৩. UI এর সিঙ্ক্রোনাইজেশন সহজ করা

Ember.js-এ computed properties ব্যবহার করে, আপনি সহজেই আপনার UI-কে ডেটার সাথে সিঙ্ক্রোনাইজ করতে পারবেন। যখন কম্পিউটেড প্রপার্টির নির্ভরশীল প্রপার্টি পরিবর্তিত হবে, তখন UI স্বয়ংক্রিয়ভাবে আপডেট হবে।

৪. স্টেট ম্যানেজমেন্ট

কম্পিউটেড প্রপার্টি ব্যবহার করে, আপনি অ্যাপ্লিকেশনের state সহজভাবে পরিচালনা করতে পারেন, কারণ এর মাধ্যমে আপনি UI এবং ডেটার মধ্যে একটি শক্তিশালী সম্পর্ক স্থাপন করতে পারবেন।

৫. অন্যান্য ডেটার সাথে সম্পর্ক তৈরি

কম্পিউটেড প্রপার্টি ব্যবহার করে, আপনি একাধিক প্রপার্টির মধ্যে সম্পর্ক তৈরি করতে পারেন এবং এক প্রপার্টির মান পরিবর্তিত হলে অন্য প্রপার্টি স্বয়ংক্রিয়ভাবে আপডেট করতে পারেন।

Computed Properties এর কিছু সাধারণ ব্যবহার

1. ফর্ম্যাটিং ডেটা: কম্পিউটেড প্রপার্টি ব্যবহার করে আপনি সহজে ডেটা ফরম্যাট করতে পারেন। যেমন, তারিখ বা টাকার মান ফরম্যাট করা।

   // app/controllers/application.js
   import Controller from '@glimmer/controller';
   import { tracked } from '@glimmer/tracking';
   
   export default class ApplicationController extends Controller {
     @tracked price = 1000;
   
     get formattedPrice() {
       return `$${this.price.toFixed(2)}`;
     }
   }
   

2. সংখ্যার উপর নির্ভরশীল গণনা: একাধিক সংখ্যার উপর ভিত্তি করে নতুন সংখ্যা তৈরি করতে কম্পিউটেড প্রপার্টি ব্যবহার করা যেতে পারে।

   // app/controllers/application.js
   import Controller from '@glimmer/controller';
   import { tracked } from '@glimmer/tracking';
   
   export default class ApplicationController extends Controller {
     @tracked num1 = 10;
     @tracked num2 = 20;
   
     get sum() {
       return this.num1 + this.num2;
     }
   }
   

Computed Properties হল Ember.js এর একটি শক্তিশালী ফিচার যা আপনাকে ডাইনামিকভাবে প্রপার্টির মান গণনা করতে সাহায্য করে। যখন নির্ভরশীল প্রপার্টির মান পরিবর্তিত হয়, তখন কম্পিউটেড প্রপার্টি স্বয়ংক্রিয়ভাবে আপডেট হয়, যা আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং কার্যকরী করে তোলে। Tracked properties এর সাহায্যে কম্পিউটেড প্রপার্টি তৈরি করা বর্তমানে আরও সহজ এবং আধুনিক হয়ে উঠেছে, যা আপনার অ্যাপ্লিকেশনের স্টেট ম্যানেজমেন্ট এবং UI সিঙ্ক্রোনাইজেশনকে উন্নত করতে সাহায্য করে।

Computed Properties হল Ember.js এর একটি গুরুত্বপূর্ণ বৈশিষ্ট্য যা ডেটা ম্যানিপুলেশনে সাহায্য করে। এটি একটি getter ফাংশন হিসেবে কাজ করে, যা dependency পরিবর্তন হলে অটোমেটিক্যালি আপডেট হয়। Ember.js-এর computed properties ব্যবহারকারীদের জন্য ডেটা ভ্যালু পরিচালনা এবং প্রসেস করার একটি অত্যন্ত কার্যকরী উপায় প্রদান করে, যেখানে আপনি সহজে ডেটার উপর নির্ভরশীল পদ্ধতি ও হিসাব তৈরি করতে পারেন।

Computed Properties এর মূল উদ্দেশ্য

• ডেটা পরিবর্তনের উপর ভিত্তি করে নতুন মান তৈরি করা।
• একাধিক properties এর উপর নির্ভরশীলভাবে নতুন ডেটা হিসাব করা।
• জটিল লজিক অ্যাক্সেস করা, যা ডেটার পরিবর্তন অনুসরণ করে।

Ember.js-এ Computed Properties এর Syntax

Ember.js-এ computed properties সাধারণত @computed ডেকোরেটর ব্যবহার করে সংজ্ঞায়িত করা হয় (Ember Octane সংস্করণ থেকে), তবে পুরানো সংস্করণে এটি Ember.computed দ্বারা পরিচালিত হতো।

১. Ember Octane (এমবার 3.x+) এ Computed Properties:

Ember Octane সংস্করণে @computed ডেকোরেটর ব্যবহার করা হয়।

// app/components/rectangle.js
import Component from '@glimmer/component';
import { computed } from '@ember/object';

export default class RectangleComponent extends Component {
  width = 10;
  height = 5;

  // Computed property
  @computed('width', 'height')
  get area() {
    return this.width * this.height;
  }
}

এখানে:

• @computed('width', 'height'): এটি একটি computed property যা width এবং height এর মান পরিবর্তন হলে area-র মান আপডেট হবে।
• area: একটি গেটার মেথড যা width এবং height এর মান নিয়ে area হিসাব করে।

২. পুরানো Ember সংস্করণে Computed Properties:

Ember.js-এ পূর্বের সংস্করণে Ember.computed ফাংশন ব্যবহার করে computed properties তৈরি করা হয়।

// app/components/rectangle.js
import Component from '@ember/component';
import { computed } from '@ember/object';

export default Component.extend({
  width: 10,
  height: 5,

  // Computed property
  area: computed('width', 'height', function() {
    return this.width * this.height;
  })
});

এখানে:

• computed('width', 'height', function() { ... }): এটি computed property তৈরি করে যা width এবং height এর মানের ওপর নির্ভর করে area রিটার্ন করবে।

Computed Properties এর ব্যবহার

১. Simple Computed Property:

একটি সাধারণ গাণিতিক হিসাব বা ডেটা ম্যানিপুলেশন করতে computed properties ব্যবহার করা হয়।

// app/components/rectangle.js
import Component from '@glimmer/component';
import { computed } from '@ember/object';

export default class RectangleComponent extends Component {
  width = 10;
  height = 5;

  @computed('width', 'height')
  get area() {
    return this.width * this.height;
  }
}

এখানে area প্রপার্টি width এবং height প্রপার্টির উপর নির্ভর করে।

২. Chained Computed Properties:

একটি computed property অন্য একটি computed property-এর উপর নির্ভর করতে পারে।

// app/components/rectangle.js
import Component from '@glimmer/component';
import { computed } from '@ember/object';

export default class RectangleComponent extends Component {
  width = 10;
  height = 5;

  @computed('width', 'height')
  get area() {
    return this.width * this.height;
  }

  @computed('area')
  get perimeter() {
    return 2 * (this.width + this.height);
  }
}

এখানে, perimeter একটি computed property যা area এর উপর নির্ভর করে, এবং area এর মান পরিবর্তিত হলে perimeter আপডেট হবে।

৩. Computed Property with Setter:

Ember.js-এ computed properties একটি setter ফাংশনও ধারণ করতে পারে, যা ডেটা পরিবর্তন করার জন্য ব্যবহৃত হয়।

// app/components/rectangle.js
import Component from '@glimmer/component';
import { computed } from '@ember/object';

export default class RectangleComponent extends Component {
  width = 10;
  height = 5;

  @computed('width', 'height')
  get area() {
    return this.width * this.height;
  }

  @area.set
  setArea(newArea) {
    this.width = Math.sqrt(newArea);
    this.height = Math.sqrt(newArea);
  }
}

এখানে, setArea একটি setter মেথড যা area এর মান পরিবর্তন করলে width এবং height কে নতুন মান অনুযায়ী আপডেট করবে।

৪. Using @tracked and @computed Together:

Ember Octane-এ @tracked ব্যবহার করে কোনো প্রপার্টি ট্র্যাক করা যায়, এবং সেই প্রপার্টি পরবর্তীতে @computed দ্বারা প্রক্রিয়া করা যেতে পারে।

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { computed } from '@ember/object';

export default class RectangleComponent extends Component {
  @tracked width = 10;
  @tracked height = 5;

  @computed('width', 'height')
  get area() {
    return this.width * this.height;
  }
}

এখানে, @tracked এর মাধ্যমে width এবং height প্রপার্টিগুলো ট্র্যাক করা হচ্ছে এবং তাদের মান পরিবর্তন হলে area স্বয়ংক্রিয়ভাবে আপডেট হবে।

Computed Properties এর সুবিধা

1. Automatic Updates: যখন নির্দিষ্ট ডেটার উপর নির্ভরশীল মান পরিবর্তিত হয়, তখন computed properties সেই পরিবর্তনের প্রতি প্রতিক্রিয়া জানায় এবং স্বয়ংক্রিয়ভাবে আপডেট হয়।
2. Data Encapsulation: ডেটার মধ্যে লজিক বা গাণিতিক হিসাব করে computed properties ব্যবহার করলে, অ্যাপ্লিকেশন লজিক পরিষ্কার এবং পাঠযোগ্য হয়।
3. Performance Optimization: Ember.js কেবলমাত্র তখনই computed property রেন্ডার করে যখন তার নির্ভরশীল ডেটা পরিবর্তিত হয়, ফলে এটি কর্মক্ষমতা উন্নত করতে সাহায্য করে।

Ember.js-এ Computed Properties ব্যবহার করে আপনি ডেটার উপর নির্ভরশীলভাবে নতুন মান তৈরি করতে পারেন। এটি ডেটা ম্যানিপুলেশনকে সহজ এবং কার্যকর করে তোলে, কারণ এটি স্বয়ংক্রিয়ভাবে আপডেট হয় এবং ডেটার পরিবর্তনকে অনুসরণ করে। Ember Octane সংস্করণে @computed ডেকোরেটর ব্যবহার করে computed properties তৈরি করা সহজ হয়েছে, যা অ্যাপ্লিকেশনের স্টেট এবং লজিককে আরও পরিষ্কার এবং উপকারী করে তোলে।

Computed Properties হল Ember.js এর একটি শক্তিশালী বৈশিষ্ট্য, যা ডাইনামিকভাবে কোন প্রপার্টির মান নির্ধারণ করতে সাহায্য করে এবং সেই মানটি ক্যাশে করে রাখে। এটি সাধারণত কোনো একটি প্রপার্টির উপর নির্ভরশীল অন্যান্য প্রপার্টির মান গণনা করার জন্য ব্যবহৃত হয়। Computed Properties ডেটা ম্যানিপুলেশন বা ডাইনামিক আচরণ সংক্রান্ত লজিককে সহজ এবং পুনঃব্যবহারযোগ্য করে তোলে।

Ember.js তে Computed Properties এর জন্য একটি ক্যাশিং মেকানিজম রয়েছে, যার মাধ্যমে একই মান বারবার পুনঃক্যালকুলেট না করে প্রপার্টি একবারের জন্য হিসাব করে সেই মান সংরক্ষণ করা হয় যতক্ষণ না নির্ভরশীল কোন প্রপার্টি পরিবর্তিত না হয়। এটি অ্যাপ্লিকেশন পারফরম্যান্সে উন্নতি ঘটায় কারণ একই প্রপার্টির মান পুনরায় গণনা করা থেকে বিরত রাখা হয়।

Computed Properties কী?

Computed Properties হল প্রপার্টি যা নির্দিষ্ট অন্যান্য প্রপার্টির মানের উপর নির্ভর করে। এই প্রপার্টি বিশেষভাবে গঠন করা হয় যাতে যখন নির্ভরশীল প্রপার্টিগুলি পরিবর্তিত হয়, তখন সেই পরিবর্তনগুলির ভিত্তিতে গননা বা ফলাফল পুনরায় হিসাব করা হয়।

Ember.computed ফাংশনটি ব্যবহার করে আপনি computed property তৈরি করতে পারেন।

import EmberObject, { computed } from '@ember/object';

let person = EmberObject.create({
  firstName: 'John',
  lastName: 'Doe',

  fullName: computed('firstName', 'lastName', function() {
    return `${this.firstName} ${this.lastName}`;
  })
});

এখানে, fullName একটি computed property যা firstName এবং lastName প্রপার্টির মানের উপর ভিত্তি করে রেন্ডার হবে। যখনই firstName বা lastName পরিবর্তিত হবে, তখন fullName স্বয়ংক্রিয়ভাবে আপডেট হবে।

Computed Properties এর Caching Behavior

Ember.js তে computed properties একটি অত্যন্ত গুরুত্বপূর্ণ caching mechanism ব্যবহার করে যা তাদের পারফরম্যান্স উন্নত করে। যখন একটি computed property তৈরি করা হয়, তখন প্রথমবার সেটি গণনা করা হয় এবং তারপর এটি ক্যাশে করা হয়। পরবর্তীতে যদি সেই প্রপার্টির নির্ভরশীল মান না পরিবর্তিত হয়, তাহলে আগের ক্যাশড মানটি পুনরায় ব্যবহার করা হয়, এবং গণনা আবার করা হয় না।

ক্যাশিং এর উপকারিতা:

1. পারফরম্যান্স উন্নতি: যখন কোনও প্রপার্টির মান পরিবর্তন না হয়, তখন আগের ফলাফল ব্যবহার করা হয়, যা অপ্রয়োজনীয় গণনা এড়িয়ে যায়।
2. ডেটার একঘেয়ে আপডেট: যতক্ষণ না নির্ভরশীল প্রপার্টি পরিবর্তিত হয়, computed property গুলির মান একই থাকে।

Caching Behavior কিভাবে কাজ করে?

1. প্রথমবার গণনা: প্রথমবার যখন computed property মূল্যায়ন করা হয়, তখন তা নির্ভরশীল প্রপার্টি থেকে ডেটা নিয়ে হিসাব করা হয় এবং ক্যাশে করে রাখা হয়।
2. ক্যাশে হওয়া মান: পরবর্তীতে যদি সেই প্রপার্টি পুনরায় অ্যাক্সেস করা হয় এবং নির্ভরশীল প্রপার্টি অপরিবর্তিত থাকে, তবে আগের ক্যাশড মান সরবরাহ করা হয়।
3. নির্ভরশীল প্রপার্টির পরিবর্তন: যদি নির্ভরশীল প্রপার্টির কোন মান পরিবর্তিত হয়, তবে computed property পুনরায় গণনা করা হয় এবং ক্যাশে আপডেট করা হয়।

Computed Properties এর Caching Behavior উদাহরণ

ধরা যাক, একটি অ্যাপ্লিকেশনে একটি computed property রয়েছে যেটি দুটি প্রপার্টি firstName এবং lastName এর উপর ভিত্তি করে fullName তৈরি করে।

import EmberObject, { computed } from '@ember/object';

let person = EmberObject.create({
  firstName: 'John',
  lastName: 'Doe',

  fullName: computed('firstName', 'lastName', function() {
    console.log('fullName calculated');
    return `${this.firstName} ${this.lastName}`;
  })
});

console.log(person.fullName); // "fullName calculated" log হবে এবং "John Doe" রিটার্ন করবে
console.log(person.fullName); // এবার কোনো "fullName calculated" log হবে না, "John Doe" রিটার্ন করবে

এখানে, firstName এবং lastName প্রপার্টির মানে কোনো পরিবর্তন না হলে, fullName প্রথমবার গণনা হওয়ার পর ক্যাশে হয়ে যায় এবং পরবর্তীতে একই মান প্রদর্শিত হয়। console.log('fullName calculated') শুধুমাত্র প্রথমবারই দেখা যাবে।

Computed Properties এর Cache ম্যানেজমেন্ট

Ember.js এর computed properties এর জন্য একটি স্মার্ট ক্যাশিং ব্যবস্থা রয়েছে, যা ডেটার অ্যাক্সেস গতিশীল এবং কার্যকরী রাখে। তবে, কিছু বিশেষ পরিস্থিতিতে আপনি ক্যাশিং আচরণ কাস্টমাইজ করতে চাইতে পারেন।

cacheable এবং volatile Computed Properties

1. Volatile Computed Properties: যদি আপনি চান যে কোনো একটি computed property প্রতিবারই গণনা হোক, তাহলে আপনি volatile() ব্যবহার করতে পারেন, যাতে ক্যাশিং বন্ধ হয় এবং প্রত্যেকবারই এটি পুনরায় গণনা হয়।

import EmberObject, { computed } from '@ember/object';

let person = EmberObject.create({
  firstName: 'John',
  lastName: 'Doe',

  fullName: computed('firstName', 'lastName', function() {
    console.log('fullName recalculated');
    return `${this.firstName} ${this.lastName}`;
  }).volatile()
});

console.log(person.fullName); // "fullName recalculated" log হবে এবং "John Doe" রিটার্ন করবে
console.log(person.fullName); // "fullName recalculated" log হবে এবং "John Doe" রিটার্ন করবে

এখানে, volatile() ব্যবহার করে fullName কে ক্যাশ না করার জন্য বলেছি। ফলে, প্রতিবার এটি রিফ্রেশ হবে।

Computed Properties হল Ember.js অ্যাপ্লিকেশনের একটি অত্যন্ত শক্তিশালী বৈশিষ্ট্য যা caching ব্যবস্থার মাধ্যমে আপনার অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করতে সাহায্য করে। এটি নির্ভরশীল প্রপার্টির পরিবর্তন অনুসারে ডেটা রেন্ডার করতে সক্ষম এবং প্রয়োজন অনুযায়ী volatile পদ্ধতি ব্যবহার করে ক্যাশিং আচরণ নিয়ন্ত্রণ করা যায়। Computed Properties Ember.js এ ডেটার সাথে সহজে ইন্টারঅ্যাকশন এবং ফ্লুয়েন্ট ইউজার ইন্টারফেস তৈরি করতে সহায়ক।

Observers হল Ember.js এর একটি গুরুত্বপূর্ণ বৈশিষ্ট্য যা ডেটার উপর নির্ভরশীলতা তৈরি করে এবং যখন সেই ডেটার মান পরিবর্তিত হয়, তখন নির্দিষ্ট ফাংশন বা লজিক ট্রিগার করে। এটা মূলত ডেটা চেঞ্জ ডিটেকশন এবং অটোমেটিক অ্যাকশন পরিচালনার জন্য ব্যবহৃত হয়। Ember.js এ observers আপনাকে ডেটার পরিবর্তন ট্র্যাক করতে এবং সেই অনুযায়ী কার্যক্রম সম্পাদন করতে সহায়তা করে।

Observers কী?

Ember.js-এ Observers এমন একটি ফাংশন বা মেথড যা নির্দিষ্ট প্রপার্টি বা ডেটার মান পরিবর্তিত হলে ট্রিগার হয়। আপনি যখন একটি নির্দিষ্ট প্রপার্টির মান পরিবর্তন করেন, তখন Observer সেই পরিবর্তনটি সনাক্ত করে এবং নিজের কাজ করে। এটি সাধারণত getter/setter মডেল বা অ্যাপ্লিকেশনের অবস্থার মধ্যে পরিবর্তন ট্র্যাক করার জন্য ব্যবহৃত হয়।

Ember.js-এ Observer তৈরি করা

Ember.js-এ Observer তৈরি করতে Ember.Object অথবা @tracked ব্যবহার করা যেতে পারে, তবে @tracked Ember 3.12 এবং তার পরবর্তী সংস্করণে ইমপ্লিমেন্ট করা হয়েছে এবং এটি বেশিরভাগ ক্ষেত্রে ব্যবহার করা হয়। কিন্তু পুরানো Ember সংস্করণে, আমরা Ember.Object এবং addObserver ব্যবহার করতাম।

এখানে আমরা Ember.js-এ Observer তৈরি করার পদ্ধতি দেখাবো।

১. Basic Observer Example

ধরা যাক আমাদের একটি কন্ট্রোলার রয়েছে এবং আমরা চাই যে যখন কোনো প্রপার্টির মান পরিবর্তিত হবে, তখন একটি বিশেষ ফাংশন বা লজিক কার্যকর হবে। এর জন্য আমরা Observer তৈরি করতে পারি।

Example: Observer using Ember.Object (Old Syntax)

// app/controllers/application.js
import Controller from '@ember/controller';
import { observer } from '@ember/object';

export default class ApplicationController extends Controller {
  firstName = 'John';
  lastName = 'Doe';

  // Observer to watch the changes in 'firstName'
  fullNameObserver = observer('firstName', function() {
    this.set('fullName', `${this.firstName} ${this.lastName}`);
  });

  // Method to change 'firstName' dynamically
  changeFirstName() {
    this.set('firstName', 'Jane');
  }
}

এখানে, firstName প্রপার্টির উপর একটি Observer তৈরি করা হয়েছে। যখনই firstName পরিবর্তিত হবে, তখন fullNameObserver মেথডটি কল হবে এবং fullName প্রপার্টি আপডেট হবে।

Example: Observer in the Template

<!-- app/templates/application.hbs -->
<h1>Full Name: {{fullName}}</h1>
<button {{on "click" this.changeFirstName}}>Change First Name</button>

এখানে, যখন আপনি বাটনে ক্লিক করবেন, firstName পরিবর্তিত হবে এবং fullNameObserver সেই পরিবর্তন ট্র্যাক করবে এবং fullName আপডেট হবে।

২. Observer using @tracked (New Syntax)

Ember 3.12 থেকে @tracked ডেকোরেটর চালু করা হয়েছে, যা Observer এর মত কাজ করে কিন্তু সিঙ্কট্যাক্স আরও সহজ এবং পরিষ্কার। @tracked দিয়ে যখন কোনো প্রপার্টি পরিবর্তিত হয়, তখন স্বয়ংক্রিয়ভাবে পুনরায় রেন্ডার হয়।

Example: Using @tracked

// app/controllers/application.js
import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';

export default class ApplicationController extends Controller {
  @tracked firstName = 'John';
  @tracked lastName = 'Doe';
  @tracked fullName = `${this.firstName} ${this.lastName}`;

  changeFirstName() {
    this.firstName = 'Jane'; // Will automatically update fullName
  }
}

এখানে, @tracked ব্যবহার করে firstName, lastName, এবং fullName এর মান ট্র্যাক করা হচ্ছে। firstName পরিবর্তিত হলে, fullName স্বয়ংক্রিয়ভাবে আপডেট হবে কারণ @tracked ডেটার উপর নির্ভরশীলতা তৈরি করে।

Example: Template

<!-- app/templates/application.hbs -->
<h1>Full Name: {{this.fullName}}</h1>
<button {{on "click" this.changeFirstName}}>Change First Name</button>

এখানে, বাটনে ক্লিক করলে firstName পরিবর্তিত হবে এবং fullName স্বয়ংক্রিয়ভাবে আপডেট হবে।

৩. Multiple Observers

একই ডেটার উপর একাধিক Observer তৈরি করা সম্ভব। আপনি যেকোনো প্রপার্টির উপর একাধিক observer যুক্ত করতে পারেন।

Example: Multiple Observers

// app/controllers/application.js
import Controller from '@ember/controller';
import { observer } from '@ember/object';

export default class ApplicationController extends Controller {
  firstName = 'John';
  lastName = 'Doe';
  fullName = `${this.firstName} ${this.lastName}`;

  // Observer for firstName
  firstNameObserver = observer('firstName', function() {
    this.set('fullName', `${this.firstName} ${this.lastName}`);
  });

  // Observer for lastName
  lastNameObserver = observer('lastName', function() {
    this.set('fullName', `${this.firstName} ${this.lastName}`);
  });

  changeNames() {
    this.set('firstName', 'Jane');
    this.set('lastName', 'Smith');
  }
}

এখানে দুটি Observer firstName এবং lastName এর পরিবর্তন ট্র্যাক করছে, এবং fullName আপডেট হচ্ছে।

৪. Observer Performance Considerations

• Observers যখন ব্যবহার করা হয়, এটি স্বয়ংক্রিয়ভাবে সিঙ্কট্যাক্স এবং পারফরম্যান্স সমস্যার সৃষ্টি করতে পারে, বিশেষ করে যখন এটি অত্যধিক ব্যবহার করা হয়। Ember 3.12 এর পর @tracked ডেকোরেটর বেশি কার্যকর এবং পারফরম্যান্সের জন্য ভালো।
• Observers সাধারণত UI আপডেট করতে ব্যবহার করা হয়, তবে অনেক বার এগুলি অতিরিক্ত পারফরম্যান্স ঝুঁকি সৃষ্টি করতে পারে, তাই এগুলি কেবল তখনই ব্যবহার করা উচিত যখন এটি প্রয়োজনীয়।

Ember.js-এ Observers আপনাকে ডেটার পরিবর্তন ট্র্যাক করার মাধ্যমে আপনার অ্যাপ্লিকেশনের UI এবং লজিককে স্বয়ংক্রিয়ভাবে আপডেট করতে সাহায্য করে। যদিও @tracked ডেকোরেটর Ember 3.12 থেকে আরও কার্যকর এবং উন্নত পদ্ধতি, তবুও Observers এখনও পুরানো সংস্করণে ব্যবহার করা হয়। Observer গুলি অত্যন্ত শক্তিশালী, তবে এগুলি সাবধানে ব্যবহার করা উচিত, বিশেষত বড় অ্যাপ্লিকেশন এবং পারফরম্যান্সের দিক থেকে।